<template>
  <div id="hospitalS">
    <div class="boxDiv">
      <div class="bomDiv">
        <i class="el-icon-s-custom"></i>
        <span slot="title" class="titleSpan">全国</span>
        <span class="titleSpan">医疗救治定点医院和发热门诊一览</span>
      </div>
    </div>
    <div class="searchDiv">
      <div class="widthDiv">
        <el-input
          placeholder="请输入内容"
          v-model="pageParam.name"
          clearable
          prefix-icon="el-icon-search"
        >
        </el-input>
      </div>
      <el-button
        size="small"
        type="primary"
        icon="el-icon-search"
        @click="toSearch"
        >搜索</el-button
      >
    </div>
    <div class="contentDiv">
      <div class="content">
        <!-- 列表展示 -->
        <div
          class="contentList"
          v-for="(item, index) in tableData"
          :key="index"
          @click="jumpMap(item)"
        >
          <div class="listHeader">
            <!-- <div class="circle">{{ index }}</div> -->
            <div class="circle"></div>
            <div class="nameSpan">{{ item.name }}</div>
            <i class="el-icon-school"></i>
          </div>
          <div>
            <div class="tagDiv">
              <el-tag type="warning" effect="dark">
                联系热线：{{ item.phone }}</el-tag
              >
            </div>
            <div class="listContent">
              <i class="el-icon-location-information"></i>
              {{ item.province }} {{ item.city }} {{ item.area }}
            </div>
          </div>
          <el-tooltip placement="top" effect="light">
            <div slot="content" class="distantDiv">与当前位置距离</div>
            <div class="floatDiv">
              <span class="distanceSpan"
                >{{
                  distanceTwo(
                    currentPosition[0],
                    currentPosition[1],
                    item.longitude,
                    item.latitude
                  )
                }}km</span
              >
            </div>
          </el-tooltip>
        </div>
        <!-- 分页 -->
        <div class="contentPage">
          <el-pagination layout="prev, pager, next" :total="total">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "../utils/request";

export default {
  data() {
    return {
      total: 0,
      currentPosition: [],
      tableData: [],
      pageParam: {
        page: 1,
        pageSize: 10,
        name: "",
      },
    };
  },
  computed: {},
  methods: {
    jumpMap(position) {
      // console.log(position);
      // 怎么调转页面,路由跳转
      this.$router.push({
        path: "/map",
        query: { latitude: position.latitude, longitude: position.longitude },
      });
    },
    distanceTwo(lng1, lat1, lng2, lat2) {
      var radLat1 = (lat1 * Math.PI) / 180.0;
      var radLat2 = (lat2 * Math.PI) / 180.0;
      var a = radLat1 - radLat2;
      var b = (lng1 * Math.PI) / 180.0 - (lng2 * Math.PI) / 180.0;
      var s =
        2 *
        Math.asin(
          Math.sqrt(
            Math.pow(Math.sin(a / 2), 2) +
              Math.cos(radLat1) *
                Math.cos(radLat2) *
                Math.pow(Math.sin(b / 2), 2)
          )
        );
      s = s * 6378.137; // EARTH_RADIUS;
      s = Math.round(s * 10000) / 10000;
      // console.log("两地距离千米：", s);
      return s;
    },
    toSearch() {
      this.pageParam.page = 1;
      this.pageQuery();
    },
    async pageQuery() {
      let res = await axios.get("/hospital/pageQuery", {
        params: this.pageParam,
      });
      // console.log(res);
      this.tableData = res.data.list;
      this.total = res.data.total;
    },
  },
  created() {
    this.pageQuery();
    this.currentPosition = [109.501845, 24.305464];
    // navigator.geolocation.getCurrentPosition(
    //   (data) => {
    //     // 信息都包含在data.coords里面
    //     // console.log("当前位置：", data.data);
    //     this.currentPosition = [data.coords.longitude, data.coords.latitude];
    //   },
    //   (err) => {
    //     console.log(err);
    //   },
    //   {
    //     enableHighAccuracy: true, //高精度
    //     timeout: 5000, //超时时间
    //     maximumAge: 10000, //位置缓存时间
    //   }
    // );
  },
  mounted() {},
};
</script>
<style scoped>
.boxDiv {
  height: 130px;
  padding: 16px;
  width: 100%;
  color: rgba(255, 38, 0, 0.658);
  background-image: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.51miz.com%2Fpreview%2Felement%2F00%2F01%2F10%2F70%2FE-1107089-97AE9DB1.jpg&refer=http%3A%2F%2Fimg.51miz.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1612703416&t=b3a5847f601f3f4da65bf9037890352d);
  border-radius: 4px;
  margin-left: -20px;
  font-family: "华文行楷";
  text-shadow: 5px 5px 5px lightsalmon;
  margin-top: -20px;
  margin-bottom: 17px;
}
.searchDiv {
  height: 50px;
}
.titleSpan {
  display: inline-block;
  font-size: 35px;
  font-weight: 700;

  height: 40px;
}
.bomDiv {
  margin-bottom: 10px;
  text-align: center;
  line-height: 130px;
}
.widthDiv {
  width: 200px;
  display: inline-block;
  margin-right: 10px;
  margin-bottom: 10px;
}
.circle {
  height: 20px;
  width: 20px;
  background-color: #f4f4f4;
  /* display: inline-block; */
  display: block;
  border-radius: 50%;
  text-align: center;
  float: left;
}
.nameSpan {
  font-family: "楷体";
  font-size: 18px;
  margin-left: 10px;
  font-weight: bold;
  float: left;
}
.listHeader {
  height: 50px;
}
.tagDiv {
  margin-top: 5px;
  margin-bottom: 5px;
}
.contentList {
  background-color: #fff;
  padding: 16px;
  position: relative;
  border: 1px solid #f8f8f8;
}
.contentList:hover {
  background-color: #fff6e5;
}
.listContent {
  font-size: 14px;
  color: #999;
}
.floatDiv {
  position: absolute;
  top: 60px;
  right: 50px;
}
.distanceSpan {
  font-size: 20px;
}
.distantDiv {
}
</style>